<template>
  <el-dialog title="题目预览" v-model="showPreviewDialog" align-center destroy-on-close width="80%" top
    @close="$emit('close')">
    <!-- 题目详情 -->
    <el-row class="dio-row" style="border:0; padding-top: 0;">
      <el-col :span="6">

        <div class="grid-content ep-bg-purple" />【题型】：{{previewList.direction}}
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />【编号】：{{previewList.id}}
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />【难度】：{{previewList.difficulty}}
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />【标签】：{{previewList.tags}}

      </el-col>

    </el-row>
    <el-row class="dio-row">
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />【学科】：{{previewList.subjectID}}
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />【目录】：{{previewList.directoryName}}
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />【方向】：{{previewList.direction}}

      </el-col>
    </el-row>
    <!-- 题干部分 -->
    <el-row class="dio-row">
      <el-form>
        <div style="width: 100%;">
          <div>【题干】:
            <p v-html="previewList.question"></p>
          </div>
          <p>{{questionTypeFilter(previewList.questionType)}} 选项：(以下选中的选项为正确答案)</p>

        </div>
        <el-radio-group v-model="checkList">
          <el-radio :label="item.isRight" v-for="(item,index) in previewList.options" :key="index">{{item.title}}
          </el-radio>
        </el-radio-group>
      </el-form>
    </el-row>
    <!-- 参考答案 -->
    <el-row class="dio-row">
      <div>【参考答案】：
        <el-button @click="showVideo=true" type="danger" style="font-size: 12px;">视频答案预览</el-button>
      </div>
      <video v-if="showVideo" controls width="600" height="500" autoplay :src="previewList.videoURL"></video>
    </el-row>
    <!-- 答案解析 -->
    <el-row class="dio-row">
      <div>
        【答案解析】<p v-html="previewList.answer"></p>
      </div>
    </el-row>
    <el-row style="border: 0;padding-bottom: 0;">
      <p>【题目备注】{{previewList.remarks}}</p>
    </el-row>
  </el-dialog>
</template>

<script>
import { defineComponent, reactive, ref, watch } from 'vue'
import { parseTimeByString, delHtmlTag, questionTypeFilter, difficultyFilter } from '@/filters/index.js'
export default defineComponent({
  name: 'QuestionsPreview',
  props: {
    showPreviewDialog: {
      type: Boolean,
      required: true
    },
    previewList: {
      type: Object,
      required: true
    }
  },

  setup (props) {
    const checkList = ref(1)
    const showVideo = ref(false)
    const options = reactive({
      options: []
    })
    watch(props.previewList, (item) => {
      console.log('item', item)
    }, {
      deep: true,
      immediate: true
    })

    return {
      parseTimeByString, delHtmlTag, questionTypeFilter, difficultyFilter, options, showVideo, checkList
    }
  }

})
</script>

<style lang="scss" scoped>
.big-card {
  padding: 5px;
  margin: 10px 10px;

}

::deep.el-form-item {
  width: 300px;
}

.dio-row {
  padding: 10px 0;
  border-bottom: solid 1px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.el-row {
  margin-top: 25px;

  .el-col-24 {
    max-width: 25%;
  }
}
</style>
